<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
		 <script src="https://cdn.jsdelivr.cn/npm/jquery@1.12.4/dist/jquery.min.js" ></script>
		 <style type="text/css">
		 	
		 	div p{
		 		background-color: dodgerblue;
		 		width: 20px;
		 		height: 20px;
		 		color:white;
		 	}
		 	.one{
		 		position: absolute;
		 		opacity: 0;
		 		display: block;
		 		left: 0px;
		 	}
		 	div p:hover span{
		 		position: absolute;
		 		display: block;
		 		left:80px;
		 		top:4px;
		 	}
		 	div p:hover svg{
		 		position: relative;
		 		left:80px;
		 		top:4px;
		 	}
		 	div p:hover .one{  
		 		background-color: dodgerblue;
		 		width:120px;
		 		height: 20px;
			 	transition:width 2s;
			 	opacity: 1;
			 	}
		 	
		 </style>
	</head>
	<body>
		<div>
			<p>
				<label  class="one">访问Vistor&nbsp;</label>
				<span class="glyphicon glyphicon-globe"></span>
			</p>
			
        </div>
   <div>
   	<p >
   		<label  class="one">学生student&nbsp;</label>
   		<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
				  <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1H7zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
				  <path fill-rule="evenodd" d="M5.216 14A2.238 2.238 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.325 6.325 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1h4.216z"/>
				  <path d="M4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5z"/></svg>
				  <span class="bi bi-people-fill"></span>
			</p>
   </div>
  
	
	</body>
</html>
